<template>
  <div>
    <div>
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="marginbottom: 20px"
      >
        <el-breadcrumb-item
          ><i class="el-icon-location-outline" />
          &nbsp;&nbsp;&nbsp;当前位置</el-breadcrumb-item
        >
        <el-breadcrumb-item @click.native="changePage" style="cursor: pointer"
          >员工花名册</el-breadcrumb-item
        >
        <el-breadcrumb-item>离职员工</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <ul class="roster-header" style="marginTop: 10px">
      <li class="roster-header-mian">
        <el-form class="roster-from" label-width="80px" :model="formLabelAlign">
          <el-form-item label="搜索员工">
            <el-input v-model="formLabelAlign.name" placeholder="请输入员工姓名"></el-input>
          </el-form-item>
          <el-form-item label="选择公司">
            <el-select v-model="company" placeholder="请选择公司">
              <el-option
                v-for="item in companyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择部门">
            <el-select v-model="branch" placeholder="请选择部门">
              <el-option
                v-for="item in branchList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职日期">
            <el-date-picker v-model="time" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item class="ob">
            <el-button type="primary" class="red-b" @click="searchData()"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </li>
    </ul>
    <ul class="roster-mian">
      <ul class="roster-mian-top">
        <li>
          <div class="item" @click="exportGroup">
            <img src="../../../assets/home/hmc_renzheng.png" />
            <span>导出</span>
          </div>
        </li>
      </ul>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        class="roster-mian-tabs"
        :cell-style="{ color: '#666', fontSize: '14px' }"
        :header-cell-style="{
          background: '#f7f7f7',
          color: '#333',
          fontSize: '14px',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" class="check"> </el-table-column>
        <el-table-column width="50">
          <template slot-scope="scope">
            <img class="tabs-img" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" >
          <template slot-scope="scope"><span style="color:#0061D5">{{ scope.row.name }}</span></template>
        </el-table-column>
        <el-table-column prop="phone"  label="手机号">
        </el-table-column>
        <el-table-column prop="mailbox" label="邮箱">
        </el-table-column>
        <el-table-column
          prop="signatureNumber"
          label="离职日期"
        >
        </el-table-column>
        <el-table-column prop="compactTime" label="离职原因"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="redact(scope.row)">修改离职信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <setdimission v-if="dialogVisible" :dialogVisible="dialogVisible" :changePopping='changePopping' pageText='修改离职信息'/>
      <el-pagination
        class="mt-2"
        background
        style="text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="2"
        :page-sizes="[100, 200, 500, 400]"
        :page-size="3"
        layout=" prev, pager, next, jumper"
        :total="5"
      >
      </el-pagination>
    </ul>
  </div>
</template>

<script>
import setdimission from '../../components/attestation/components/setdimission.vue'
export default {
  props:['goDimission'],
  components:{setdimission},
  data() {
    return {
      formLabelAlign: {
        name: "",
      },
      time: "", //入职时间
      companyList: [
        { value: "sz", label: "深圳公司" },
        { value: "sbj", label: "北京公司" },
      ],
      branchList: [
        { value: "s1z", label: "深圳公2司" },
        { value: "sb2j", label: "北京3公司" },
      ],
      branch: "", //部门
      company: "", //公司
      tableData: [
        {
          name: "王小虎",
        },
      ],
      multipleSelection: [],
      dialogVisible:false,//是否显示修改离职弹窗
    };
  },
  methods: {
    changePage(){
      this.goDimission(false)
    },
    //点击条件搜索
    async searchData() {
      let startTime;
      let endTime;
      if (this.selectDate) {
        let str = this.selectDate;
        startTime = str[0]; //开始时间
        endTime = str[1]; //结束时间
        startTime = this.publicFun.formatdate(startTime);
        endTime = this.publicFun.formatdate(endTime);
      }
      let searchList = {
        startTime,
        endTime,
        groupId: this.groupCondition.groupId,
        timeType: this.isTime,
        goodsName: this.groupCondition.name,
        pageSize: this.paging.pageSize,
        pageNum: this.paging.pageNum,
        groupStatus: 2,
      };
      // let result = await getGroupList(searchList);
      // if (result.code == 200) {
      //   this.paging.total = result.data.total;
      //   this.paging.pageSize = result.data.pageSize;
      //   this.paging.pageNum = result.data.pageNum;
      //   this.paging.pages = result.data.pages;
      //   this.groupData = result.data.rows;
      // }
    },
    //跳转新增页面
    add(val){
      if(val == 3){
        this.goPath(val)
      }else{
        this.goPath(val,'name')
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {},
    //点击编辑
    redact(data){
      this.dialogVisible = true
    },

    //导出拼团记录
    exportGroup() {
      let startTime;
      let endTime;
      if (this.selectDate) {
        let str = this.selectDate;
        startTime = str[0]; //开始时间
        endTime = str[1]; //结束时间
        startTime = this.publicFun.formatdate(startTime);
        endTime = this.publicFun.formatdate(endTime);
      }
      let queryParams = {
        startTime,
        endTime,
        groupId: this.groupCondition.groupId,
        timeType: this.isTime,
        goodsName: this.groupCondition.name,
        dictName: "",
        dictType: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.$confirm("是否确认导出所有类型数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // return getExportRecord(queryParams); //先获取后端文件接口
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    //改变设置离职弹窗状态
    changePopping(val){
      this.dialogVisible = val
    },
  },
};
</script>

<style>
</style>